<!-- 登录页：login -->
<!-- 登录页：login -->
<!-- 登录页：login -->
<template>
    <div class="login">
        <vue-particles class="login-background" color="#409EFF" :particleOpacity="0.7" :particlesNumber="80"
            shapeType="circle" :particleSize="4" linesColor="#409EFF" :linesWidth="1" :lineLinked="true"
            :lineOpacity="0.4" :linesDistance="150" :moveSpeed="3" :hoverEffect="true" hoverMode="grab"
            :clickEffect="true" clickMode="push">
        </vue-particles>
        <div class="login-other">
            <div class="login-con">
                <h1 class="oneH">ibox-后台管理系统</h1>
                <!-- 顶部切换tab -->
                <ul class="menu-tab">
                    <li v-for="(item, index) in menuData" :key="'item' + index" :class="{ current: item.current }"
                        @click="clickMenu(item)">
                        {{ item.txt }}
                    </li>
                </ul>
                <!-- 顶部切换结束 -->

                <!-- 表单部分开始 -->
                <el-form ref="ruleFormRef" :model="ruleForm" status-icon :rules="rules" class="demo-ruleForm">
                    <!-- 修改提示文字，并修改type类型、v-model并添加类名哟 -->
                    <!-- 账号 -->
                    <el-form-item label="账号：" prop="username" class="item-from">
                        <el-input v-model.trim="ruleForm.username" type="text" autocomplete="off" placeholder="账号"
                            auto-complete="off" minlength="6" maxlength="12" />
                    </el-form-item>
                    <!-- 密码 -->
                    <el-form-item label="密码：" prop="password" class="item-from">
                        <el-input id="password" v-model.trim="ruleForm.password" type="password" autocomplete="off"
                            minlength="6" maxlength="12" placeholder="密码" />
                    </el-form-item>
                    <!-- 重复密码是passwords 多个s；【加了判断，点击登录的时候 重复密码不应该显示 model === 'register'】 -->
                    <el-form-item label="确认密码：" prop="passwords" class="item-from" v-show="model === 'register'">
                        <el-input v-model.trim="ruleForm.passwords" type="password" autocomplete="off" minlength="6"
                            maxlength="12" placeholder="确认密码" />
                    </el-form-item>
                    <!-- 提交、重置等按钮；加判断【显示登录或者注册】【disabled，能否点击】-->
                    <el-form-item style="margin-top: 33px;">
                        <el-button type="primary" class="login-btn block" @click="submitForm(ruleFormRef)"
                            :disabled="btnbool">{{ model === 'login' ? "登录" : "提交注册" }}</el-button>
                        <br>
                        <el-button v-show="model === 'register'" @click="resetForm(ruleFormRef)">重置</el-button>
                    </el-form-item>
                </el-form>
                <!-- 表单部分结束 -->
            </div>
        </div>
    </div>
</template>
  
<script setup lang="ts">
import { reactive, ref, watch } from "vue";
// 引用表单验证的正则工具库，一开始导入会报错，在主目录下的的tsconfig.json里 
import * as verification from '../../util/verification';
// 引入封装好的api接口
import { getAdministrator } from '../../api/api';
// 引入HOOK密码加密
// import useMd5 from '../../hooks/';
// 引入饿了么UI，标签、弹窗
import { FormInstance, ElMessage } from 'element-plus';
import { useRouter } from 'vue-router';
import { useStore } from "vuex";
const ruleFormRef = ref<FormInstance>();
const router = useRouter();
const store = useStore();
// 管理员账号
// const admin = ref<any>({
//     username: "admin",
//     password: "123456",
// });



// 一、1创建一个变量存放TAB标签的内容
const menuData = reactive([
    // txt：是tab的标签名，current:显示隐藏(高亮显示)，type：跳转到那里？
    { txt: "登录", current: true, type: "login" },
    { txt: "注册", current: false, type: "register" },
])
// 一、2跳转的路径暂存
const model = ref("login");

// 一、3顶部TAB切换模块的点击事件
const clickMenu = (data: any) => {
    // 1、先让所有的数据都变成false未选中状态，遍历改成未选中
    menuData.forEach((elem) => {
        elem.current = false;
    });
    // 2、点击哪一项改成选中，data是上面传参进来的，高亮显示
    data.current = true;
    // 3、修改模块的路径，应该是叫路径，还不是很熟悉，大概就是路径的意思
    model.value = data.type;
};

// 二、1饿了么UI的功能，表单校验   （都是从饿了么UI里CV进来后修改的）
// 1、账号的验证-OK，上面引入了独立的工具库，verification，在util下的verification.js文件
const checkUser = (rule: any, value: any, callback: any) => {
    // 定义正则（上面引入了），验证账号
    if (!value) {
        return callback(new Error('账号不能为空！'));
    } else if (verification.verificationAP(value)) {
        return callback(new Error("账号格式有误！"));
    } else {
        callback();
    }
};

// 2、第一次密码的验证-OK
const validatePass = (rule: any, value: any, callback: any) => {
    // 定义正则（上面引入了），验证密码 6至12位的字母+数字 
    if (value === '') {
        callback(new Error('密码不能为空！'));
    } else if (verification.verificationAP(value)) {
        callback(new Error("密码格式有误，请输入6至12位的字母+数字！"));
    } else {
        callback();
    }
};

// 3、第二次密码的验证-OK，
const validatePass2 = (rule: any, value: any, callback: any) => {
    // 【因登录时候不需要重复密码，故登录时隐藏】
    if (model.value === 'login') {
        callback();
    }
    // 判断二次密码是否一致
    if (value === '') {
        callback(new Error('确认密码不能为空！'));
    } else if (value !== ruleForm.password) {
        callback(new Error("两次输入的密码不相同，请检查！"));
    } else {
        callback();
    }
};

// 4、输入框中绑定的变量-OK
const ruleForm = reactive({
    username: '',
    password: '',
    passwords: '',
});

// 5、触发验证-OK
const rules = reactive({
    username: [{ validator: checkUser, trigger: 'blur' }],
    password: [{ validator: validatePass, trigger: 'blur' }],
    passwords: [{ validator: validatePass2, trigger: 'blur' }],
});

// 6、提交按钮，引用上面导入的api封装的请求。            【登录按钮】
const submitForm = (formEl: FormInstance | undefined) => {
    console.log('提交了', formEl);
    if (!formEl) return;
    // UI自带的验证是否有内容
    formEl.validate(async (valid) => {
        // console.log('valid', valid);     // true
        if (valid) {
            if (model.value === 'login') {
                let data = {
                    adminUser: ruleForm.username,
                    adminPass: ruleForm.password
                }
                console.log('提交按钮的data', data);
                let res: any = await getAdministrator(data)
                console.log('login----res', res);
                if (res.data.errorCode === 0) {
                    console.log('管理员正确', res.data.data.token);
                    // type: success / info / warning / error    成功/信息/警告/错误
                    ElMessage({                        
                        type: 'success',
                        message: `登陆成功，即将跳转`,
                    });
                    //保存后端返回的token
                    store.commit("updateToken", res.data.data.token)
                    console.log('查看登录后是否存入token', store.state.HomeModules._token);
                    // 保存 userId 用户名，因为后端返回里没有账号，只能读取表单里的来用
                    store.commit("updateUserId", data.adminUser)
                    console.log('查看登录后是否存入id', store.state.HomeModules.userId);
                    // 跳转到首页
                    router.push("/home")
                } else if(res.data.errorCode === 1) {
                    ElMessage({
                        type: 'error',
                        message: `用户不存在，请检查`,
                    });
                }
            } else {
                // 注册的逻辑，后台先不写注册
                let data = {
                    phone: ruleForm.username,
                    password: ruleForm.password,
                    passwords: ruleForm.passwords
                }
                console.log('已点击注册');
                ElMessage({
                    type: 'error',
                    message: `系统暂未开放注册`,
                });
            }
        } else {
            return false
        }
    });
}

// 7、表单验证的重置按钮-OK，不需要修改
const resetForm = (formEl: FormInstance | undefined) => {
    if (!formEl) return
    formEl.resetFields();
};

// 三、1控制登录按钮能否点击
let btnbool = ref(true);
// 2使用watch来监听数据，判断输入框是否有内容
watch(ruleForm, (newval: any) => {
    // console.log(newval);
    // 判断登录还是注册
    if (model.value === "login") {
        // 登录
        if (newval.username != "" && newval.password != "") {
            btnbool.value = false;
        } else {
            btnbool.value = true;
        }
    } else {
        // 注册
        if (newval.username != "" && newval.password != "" && newval.passwords != "") {
            btnbool.value = false;
        } else {
            btnbool.value = true;
        }
    }
})


</script>




<style lang="scss">
.oneH {
    font: 900 30px/40px '';
    text-align: center;
    margin: 0 0 26px 0;
}
.login-background {
    background: linear-gradient(-180deg, #dcf2e6 0%, #ffffff 100%);
    width: 100%;
    height: 100%;
    /**宽高100%是为了图片铺满屏幕 */
    z-index: -1;
    position: absolute;
}

.login-other {
    z-index: 1;
    margin: 180px 0 0 calc(calc(100vw - 410px) / 2);
    position: absolute;
}

.login-con {
    z-index: 1;
    border-radius: 15px;
    background-clip: padding-box;
    // width: 500px;
    padding: 15px 35px 0px 20px;
    background: #fefefe;
    border: 1px solid #eaeaea;
    box-shadow: 0 0 25px #cac6c6;
}

// 表单样式
.demo-ruleForm {
    width: 350px;
    margin: 30px auto;

    label {
        width: 82px;
        display: block;
        margin-bottom: 20px;
        font-size: 14px;
        color: rgb(10, 10, 10);
        padding-top: 11px;
    }

    .item-from {
        margin-bottom: 13px;
    }

    .block {
        display: block;
        // width: 100%;
    }

    .login-btn {
        width: 173px;
        margin-left: 93px;
        margin-right: 18px;

    }

}

.el-form-item__error {
    line-height: 0;
}

// 登录页样式
// .login {
// background-color: #04047a; //深蓝色
// height: 100%;
// }


// html,
// body,
// #app {
//     //设置页面100%高
//     height: 100%;
// }

// 设置切换样式开始
.login-wrap {
    width: 330px;
    margin: auto;
}

.menu-tab {
    text-align: center;
    //白色半透明
    background-color: rgba(184, 169, 238, 0.1);

    li {
        display: inline-block;
        width: 175px;
        line-height: 36px;
        font-size: 18px;
        color: rgb(10, 10, 10);
        border-radius: 2px;
        cursor: pointer;

    }

    .current {
        color: rgb(40, 143, 247);
        font: 800 18px/36px '';
        //白色半透明
        background-color: rgba(82, 92, 231, 0.1);
    }
}

// 设置切换样式结束
</style>